</div>
<div id="product_notification"></div>
<div class="mens">    
  <div class="main">
     <div class="wrap">
     	<ul class="breadcrumb breadcrumb__t"><a class="home" href="<?php echo base_url();?>">Home</a> / <a href="#"><?php if($product_info->num_rows()==1){echo $product_info->row()->name;}?></a></ul>
		
			<?php 
					if($product_info->num_rows()==1){
						
			?>
						<div class="cont span_2_of_3">
		  	<div class="grid images_3_of_2">
						<div id="container">
							<div id="products_example">
								<div id="products">
									<div class="slides_container">
											<?php 
												foreach($product_images->result() as $row){
											?>
													<!--<a href="#"><img class="a" id="img1" src="<?php echo base_url().F_IMG;?><?php echo $row->name;?>" alt="" rel="<?php echo base_url().F_IMG;?><?php echo $row->name;?>" /></a>-->
											<?php		
												}
											?>
									        <a href="#"><img class="a" id="img1" src="<?php echo base_url().F_IMG;?>s-img.jpg" alt="" rel="images/s-img.jpg" /></a>
											<a href="#"><img class="a" id="img2" src="<?php echo base_url().F_IMG;?>s-img1.jpg" alt="" rel="images/s-img1.jpg" /></a>
											<a href="#"><img alt=" Ajax Upload and Resize an Image with PHP." class="a" id="img3" src="<?php echo base_url().F_IMG;?>s-img2.jpg"  rel="images/s-img2.jpg" /></a>
											<a href="#"><img class="a" id="img4" src="<?php echo base_url().F_IMG;?>s-img3.jpg" alt="" rel="images/s-img3.jpg" /></a>
											
									</div>
									<ul class="pagination">
										<li><a href="#"><img src="<?php echo base_url().F_IMG;?>s1.jpg" width="s-img" alt="1144953 3 2x"></a></li>
										<li><a href="#"><img src="<?php echo base_url().F_IMG;?>s2.jpg" width="s-img1" alt="1144953 3 2x"></a></li>
										<li><a href="#"><img src="<?php echo base_url().F_IMG;?>s3.jpg" width="s-img2" alt="1144953 3 2x"></a></li>
										<li><a href="#"><img src="<?php echo base_url().F_IMG;?>s4.jpg" width="s-img3" alt="1144953 1 2x"></a></li><div class="clear"></div>
									</ul>
								</div>
							</div>
						</div>
	            </div>
		         <div class="desc1 span_3_of_2">
		         	<h3 class="m_3"><?php echo $product_info->row()->name;?></h3>
		             <p class="m_5"><span style="color:red !important;"><?php echo money_format('%#10n', $product_info->row()->price);?></span>&nbsp;<a href="#">click for offer</a></p><br />
		             <p class="m_3"><?php echo number_format($product_info->row()->view);?> views</p><br />
		             <p class="m_3">
		             <?php
						
						//AJAX ELEMENT & FILE WITH THE CURRENT RATING, BASE, AND VOTES
						echo '<div class="ajax">';
								$n=$ratings->num_rows();//NUMBER OF VOTES
								if($n==1){
								    $v = 'vote';
								} else {
								    $v = 'votes';
								}
								$x=0;
								foreach($ratings->result() as $r){
								    $rr = $r->rating; //EACH RATING FOR THE CONTENT
								    $x += $rr; //ADDS THEM ALL UP
								}
								//IF THERE ARE RATINGS...
								if($n){
								    $rating = $x/$n; //THE AVERAGE RATING (UNROUNDED)
								} else {
								    $rating = 0; //SET TO PREVENT THE ERROR OF DIVISION BY 0, WHICH WOULD BE THE NUMBER OF RATINGS HERE
								}
								$dec_rating = round($rating, 1); //ROUNDED RATING TO THE NEAREST TENTH
								//SHOWS THE FULL NUMBER OF STARS (Ex: 3.5 stars = 3 full stars)
								$stars="";
								for($i=1; $i<=floor($rating); $i++){
								    $stars .= '<div class="star" id="'.$i.'"></div>';
								}
								
								//SHOWS THE USER'S RATING, IF RATING HAS BEEN SUBMITTED BEFORE
								if($rating_submit->num_rows>0){
									$y = 'You rated this <b>'.$rating_submit->row()->rating.'</b>';
								}else{
									$y="";
								}
								//THE OVERALL RATING (THE OPAQUE STARS)
								echo '<div class="r">
								<div class="rating">'.$stars.'</div>';
								
								//THE TRANSPARENT STARS (OPAQUE STARS WILL COVER AS MANY STARS AS THE RATING REPRESENTS)
								echo '<div class="transparent">
								<div class="star" id="1"></div>
								<div class="star" id="2"></div>
								<div class="star" id="3"></div>
								<div class="star" id="4"></div>
								<div class="star" id="5"></div>
								<div class="votes">('.$dec_rating.'/5, '.$n.' '.$v.') '.$y.'</div>
								</div>
								
								</div>';
								
						echo '</div></p><br />';
						
					?>
		         	  <br /><p class="m_3">
						
							<input type="button" value="Add to favorite" title="add to favorite" class="btn btn-primary" id="add_to_favorite">
							<input type="hidden" id="product_item" value="<?php echo $product_info->row()->product_id;?>" />
					 </p>
					 <br />
					<span class="m_link">
						<div class="fb-like" data-href="http://postleng.netne.net/product/detail/<?php echo $this->uri->segment(3);?>" data-width="200" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
						
					</span>
				     <!--<p class="m_text2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit </p>-->
			     </div>
			   <div class="clear"></div>	
	    <div class="clients">
	    <h3 class="m_3">10 Other Products in the same category</h3>
		 <ul id="flexiselDemo3">
		 	<?php
		 	
		 		foreach($product_related->result() as $row){
		 			$key_code=$row->key_code;
					$name=$row->pro_name;
					$price=$row->price;
					$img=$row->img_name;
			?>
					<li><img src="<?php echo base_url().F_IMG;?><?php echo $img;?>" /><a href="<?php echo base_url();?>product/detail/<?php echo $key_code;?>"><?php echo str_replace("_", "", $name);?></a><p>$ <?php echo $price;?></p></li>
			<?php
		 		}
		 	?>
			<!--<li><img src="<?php echo base_url().F_IMG;?>s8.jpg" /><a href="#">Category</a><p>Rs 550</p></li>
			<li><img src="<?php echo base_url().F_IMG;?>s9.jpg" /><a href="#">Category</a><p>Rs 750</p></li>-->
			<!--<li><img src="<?php echo base_url().F_IMG;?>s6.jpg" /><a href="#">Category</a><p>Rs 850</p></li>
			<li><img src="<?php echo base_url().F_IMG;?>s7.jpg" /><a href="#">Category</a><p>Rs 900</p></li>
			<li><img src="<?php echo base_url().F_IMG;?>s8.jpg" /><a href="#">Category</a><p>Rs 550</p></li>
			<li><img src="<?php echo base_url().F_IMG;?>s9.jpg" /><a href="#">Category</a><p>Rs 750</p></li>-->
		 </ul>
	<script type="text/javascript">
		$(window).load(function() {
			$("#flexiselDemo1").flexisel();
			$("#flexiselDemo2").flexisel({
				enableResponsiveBreakpoints: true,
		    	responsiveBreakpoints: { 
		    		portrait: { 
		    			changePoint:480,
		    			visibleItems: 1
		    		}, 
		    		landscape: { 
		    			changePoint:640,
		    			visibleItems: 2
		    		},
		    		tablet: { 
		    			changePoint:768,
		    			visibleItems: 3
		    		}
		    	}
		    });
		
			$("#flexiselDemo3").flexisel({
				visibleItems: 5,
				animationSpeed: 1000,
				autoPlay: true,
				autoPlaySpeed: 3000,    		
				pauseOnHover: true,
				enableResponsiveBreakpoints: true,
		    	responsiveBreakpoints: { 
		    		portrait: { 
		    			changePoint:480,
		    			visibleItems: 1
		    		}, 
		    		landscape: { 
		    			changePoint:640,
		    			visibleItems: 2
		    		},
		    		tablet: { 
		    			changePoint:768,
		    			visibleItems: 3
		    		}
		    	}
		    });
		    
		});
	</script>
	<script type="text/javascript" src="<?php echo base_url().F_JS;?>jquery.flexisel.js"></script>
     </div>
     <div class="toogle">
     	<h3 class="m_3">Product Details</h3>
     	<p class="m_text"><?php echo $product_info->row()->description;?></p>
     </div>
     <div class="toogle">
     	<h3 class="m_3">More Information</h3>
     	<p class="m_text"><?php echo $product_info->row()->more_info;?></p>
     </div>
     <hr />
     <div class="toogle">
     	<h3 class="m_3">Comments</h3>
     	<div class="fb-comments" data-href="<?php echo base_url();?>product/detail/<?php echo $this->uri->segment(3);?>" data-numposts="5" data-colorscheme="light"></div>
     </div>
     
      </div>
			<?php										
					}else{
						echo '<div class="cont span_2_of_3"><div class="alert alert-info">There is no product post match with your search !</div></div>';				
					}							
			?>
			
			<div class="rsingle span_1_of_single">
				<h5 class="m_1">Categories</h5>
					<select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
						<option value="1">Mens</option>
						<option value="2">Sub Category1</option>
						<option value="3">Sub Category2</option>
						<option value="4">Sub Category3</option>
					</select>
					<select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
						<option value="1">Womens</option>
						<option value="2">Sub Category1</option>
						<option value="3">Sub Category2</option>
						<option value="4">Sub Category3</option>
					</select>
					<ul class="kids">
						<li><a href="#">Kids</a></li>
						<li class="last"><a href="#">Glasses Shop</a></li>
					</ul>
                   <section  class="sky-form">
					<h4>Price</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>$ 500 - $ 700</label>
							</div>
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 10 - $ 50</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 50 - $ 100</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 100 - $ 300</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 300 - $ 500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 700 - $ 1000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 1000 - $ 1500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 1500 - $ 2000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 2000 - $ 2500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox" ><i></i>$ 2500 - $ 3000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 3500 - $ 4000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 4000 - $ 4500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 4500 - $ 5000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 5000 - $ 5500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 5500 - $ 6000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 6000 - $ 6500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 6500 - $ 7000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 7000 - $ 7500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 7500 - $ 8000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>$ 8000 - $ 8500</label>	
							</div>
						</div>
		        </section>
		       <section  class="sky-form">
					<h4>Brand Name</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>John Jacobs</label>
							</div>
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Tag Heuer</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Lee Cooper</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Mikli</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>S Oliver</label>
								<label class="checkbox"><input type="checkbox" name="checkbox" ><i></i>Hackett</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Killer</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>IDEE</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Vogue</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Gunnar</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Accu Reader</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>CAT</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Excellent</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Feelgood</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Odysey</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Animal</label>	
							</div>
						</div>
		       </section>
		       <section  class="sky-form">
					<h4>Frame Shape</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Pilot</label>
							</div>
							<div class="col col-4">
							    <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rectangle</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Square</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Round</label>
								<label class="checkbox"><input type="checkbox" name="checkbox" ><i></i>Others</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Cat Eyes</label>
								<label class="checkbox"><input type="checkbox" name="checkbox" ><i></i>Wrap Around</label>
						    </div>
						</div>
		       </section>
		       <section  class="sky-form">
					<h4>Frame Size</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Small</label>
							</div>
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Medium</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Large</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Medium</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Large</label>
							</div>
						</div>
		       </section>
		       <section  class="sky-form">
					<h4>Frame Type</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Full Rim</label>
							</div>
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rim Less</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Half Rim</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rim Less</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Half Rim</label>
							</div>
						</div>
		       </section>
		       <section  class="sky-form">
					<h4>Colors</h4>
						<ul class="color-list">
							<li><a href="#"> <span class="color1"> </span><p class="red">Red</p></a></li>
							<li><a href="#"> <span class="color2"> </span><p class="red">Green</p></a></li>
							<li><a href="#"> <span class="color3"> </span><p class="red">Blue</p></a></li>
							<li><a href="#"> <span class="color4"> </span><p class="red">Yellow</p></a></li>
							<li><a href="#"> <span class="color5"> </span><p class="red">Violet</p></a></li>
							<li><a href="#"> <span class="color6"> </span><p class="red">Orange</p></a></li>
							<li><a href="#"> <span class="color7"> </span><p class="red">Gray</p></a></li>
					   </ul>
		       </section>
		       <!--<script src="<?php echo base_url().F_JS;?>jquery.easydropdown.js"></script>-->
		      </div
		      <div class="clear"></div>
			</div>
			 <div class="clear"></div>
		   </div>
		</div>
		
<script type="text/javascript">
            	$(document).ready(function() {

                $( "#add_to_favorite" ).click(function() {

                    var product_id=$("#product_item").val();
                   
 					//alert(product_id);

                    $.post("<?php echo base_url(); ?>account/add_favorite_product",
					{
						product_item_id: product_id
						},
						function(data, status) {
							
								$("#product_notification").html(data);	
							
							
					});
				});
			});
        </script>
        
		<!--Rating Process-->
		<script> 
		$(function(){
		   $(".star").live("mouseover", function(){ //SELECTING A STAR
		     $(".rating").hide(); //HIDES THE CURRENT RATING WHEN MOUSE IS OVER A STAR
		     var d = $(this).attr("id"); //GETS THE NUMBER OF THE STAR
		
		     //HIGHLIGHTS EVERY STAR BEHIND IT
		     for(i=(d-1); i>=0; i--){
		       $(".transparent .star:eq("+i+")").css({"opacity":"1.0"});
		     }
		   }).live("click", function(){ //RATING PROCESS
		     var the_id = $("#id").val(); //GETS THE ID OF THE CONTENT
		     var rating = $(this).attr("id"); //GETS THE NUMBER OF THE STAR
		     var data = 'rating='+rating+'&id=<?php echo $product_info -> row() -> product_id; ?>'; //ID OF THE CONTENT
		     $.ajax({
		       type: "POST",
		       data: data,
		       url: "<?php echo base_url();?>product/rate", //CALLBACK FILE
		       success: function(e){
		         $(".ajax").html(e); //DISPLAYS THE NEW RATING IN HTML
		       }
		     });
		   }).live("mouseout", function(){ //WHEN MOUSE IS NOT OVER THE RATING
		     $(".rating").show(); //SHOWS THE CURRENT RATING
		     $(".transparent .star").css({"opacity":"0.25"}); //TRANSPARENTS THE BASE
		   });
		});
		</script>
		
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=842794229070317&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>